<template>
  <div class="order-dispute-list">
    <van-list v-model="loading" finished-text="没有更多了" :finished="!loading">
      <order-dispute-list-item v-for="dispute in disputes"
                              :key="dispute.id" :dispute="dispute"
                              @cancel="refreshDisputes"/>
    </van-list>
  </div>
</template>

<script>
import { message, order, security } from "@mall/api-services"
import OrderDisputeListItem from "@/components/order/OrderDisputeListItem"
import { List, Toast } from "vant"

export default {
  name: "OrderDisputeList",
  components: {
    OrderDisputeListItem,
    [List.name]: List,
  },
  data() {
    return {
      loading: false,
      disputes: [],
    }
  },
  created() {
    this.refreshDisputes()
  },
  methods: {
    refreshDisputes() {
      this.loading = true
      order.OrderDisputeServiceV1.createOrderDisputeQuery()
          .customerId(security.SecurityUserHolder.getUserId())
          .list()
          .then(pagedOrder => {
            this.disputes = pagedOrder.elements
          })
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => this.loading = false)
    },
  },
}
</script>

<style lang="scss" scoped>
.order-dispute-list {

}
</style>
